<template>
  <div id="main" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'OrderDistribution',
  mounted() {
    this.LoadingOrder()
  },
  methods: {
    LoadingOrder() {
      const chartDom = document.getElementById('main')
      const myChart = echarts.init(chartDom)
      const data = [
        { value: [780502.31, '山东'] },
        { value: [420009.0, '上海'] },
        { value: [203004.5, '云南'] },
        { value: [142949.5, '内蒙古'] },
        { value: [361108.76, '北京'] },
        { value: [358815.41, '福建'] },
        { value: [488744.7, '四川'] },
        { value: [41222.7, '宁夏'] },
        { value: [202454.16, '安徽'] },
        { value: [74579.42, '甘肃'] },
        { value: [1095497.07, '广东'] },
        { value: [476271.2, '湖南'] },
        { value: [549926.0, '河南'] },
        { value: [214498.5, '黑龙江'] },
        { value: [1019154.78, '江苏'] },
        { value: [146178.0, '辽宁'] },
        { value: [278874.4, '江西'] },
        { value: [150672.4, '吉林'] },
        { value: [151706.67, '新疆'] },
        { value: [60149.72, '海南'] },
        { value: [503187.0, '河北'] },
        { value: [267100.0, '陕西'] },
        { value: [40376.48, '青海'] },
        { value: [90279.58, '贵州'] },
        { value: [212896.4, '广西'] },
        { value: [19081.48, '西藏'] },
        { value: [141166.0, '天津'] },
        { value: [473983.3, '湖北'] },
        { value: [250519.18, '重庆'] },
        { value: [671628.72, '浙江'] },
        { value: [148874.97, '山西'] },
        { value: [448874, '台湾'] },
        { value: [248874.97, '香港'] },
        { value: [48874.97, '澳门'] }
      ]

      const dataNum = data.sort((a, b) => a.value[0] - b.value[0])
      const names = dataNum.map(item => item.value[1])
      // console.log(names)

      const option = {
        title: {
          text: '单位:  笔',
          textStyle: {
            fontSize: 14,
            color: '#818693',
            fontWeight: 'normal'

          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
        },
        legend: {},
        grid: {
          containLabel: true,
          width: '80%',
          height: '80%',
          left: '10%',
          top: '5%'
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: names,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false // 隐藏 y 轴的轴线
          }
        },
        series: [
          {
            data: data.sort((a, b) => {
              return a.value[0] - b.value[0]
            }),
            type: 'bar',
            barWidth: 8
          }
        ]
      }

      myChart.setOption(option)
    }
  }
}
</script>

<style>
#main{
   width: 100%;
    height: 600px;
}
</style>
